<template>
    <div id="permissionDialog">
    <el-dialog
    @opened="assigmentRole"
      v-model="dialog.$state.perdialogVisible"
      title="分配权限"
      width="30%"
    >
        <el-select v-model="selectroleid" placeholder="选择角色" style="width: 115px">
          <el-option 
          v-for="item in roleOption"
          :key ='item.roleid'
          :label="item.roleName" 
          :value="item.roleid" 
          :disabled="item.disabled"
          />
        </el-select>
        &nbsp;&nbsp;&nbsp;<span>{{ props.perData.nickname }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog.perdialogVisible = false">取消</el-button>
          <el-button type="primary" @click=handleAssigmentPermission>
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    </div>
  </template>
  
  <script setup>
    import { ref } from 'vue'
    import usedialog from '../../store/dialog.js'
    import userStore from '../../store/user.js'
    import isChild from '../../utils/isChild';
    import userole from '../../store/role.js'
    import {assignmentRoleApi} from '../../api/role.js'
    import { ElMessage } from 'element-plus'
    let roler = userole()
    let user = userStore()
    let dialog = usedialog()
    
    let props = defineProps({
        perData:{
            type:Object,
            default:()=>{}
        },
        getUsersList:{
            type:Function,
        }
    })

   let roleOption =ref([])

   let selectroleid = ref('5')
  let assigmentRole = ()=>{
    roler.getAllRole()
 
 roleOption.value = roler.$state.allRole.map(role=>{
    let roleObj = {}
    let currentRoleid = user.$state.userInfo.value.roleid
    let flag = isChild(currentRoleid,role.roleid,roler.$state.allRole)

    roleObj = {...role}
    if(!flag){
        roleObj.disabled = true
    }
    return roleObj
 })
  }
  let handleAssigmentPermission =async ()=>{
    dialog.perdialogVisible = false
    try{
     let res =await assignmentRoleApi({unid:props.perData.unid,roleid:selectroleid.value})
     
     props.getUsersList()

     if(res.data.code === 200){
        ElMessage.success(props.perData.nickname+'分配角色成功')
     }
    }catch(error){
     ElMessage.error('分配角色失败')
      console.log(error);
    }
  }

  </script>
  <style scoped>

    
  </style>
  